<template>
    <card
        :title="$t('wp-she-bei-dang-an')"
        :titleBolder="true">
        <template
            v-if="productId">
            <div class="line-box">
                <div class="line-left">{{ $t('wp-she-bei-zhuang-tai') }}</div>
                <div class="line-right">
                    <device-status
                        :uuid="uuid">
                    </device-status>
                </div>
            </div>
            <line-cell
                :listSetProps="listprops"
                :listData="listData">
            </line-cell>
        </template>
        <template
            v-else>
            <line-cell
                :listSetProps="nopaListprops"
                :listData="nopaListData">
            </line-cell>
            <div class="nopa">{{ $t('wp-wei-jian-dang-an-she-bei') }}</div>
        </template>
    </card>
</template>
<script>
import { reactive, toRefs, onActivated } from 'vue';
import card from '@/components/_common/card.vue';
import LineCell from '@/components/_common/LineCell.vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';
import DeviceStatus from './deviceStatus.vue';
import { selfI18n } from '@/i18n/index';

export default {
    components: {
        card,
        LineCell,
        DeviceStatus
    },
    props: {
        productId: String,
        friendsObj: Object,
        uuid: String
    },
    setup (props, ctx) {
        const $st = selfI18n;
        const { getDeviceFileInfo } = deviceviewSetup();

        const state = reactive({
            listprops: [{
                id: 'devalias',
                label: $st('wp-she-bei-bie-ming')
            }, {
                id: 'manufacturingCode',
                label: $st('wp-chu-chang-bian-hao')
            }, {
                id: 'customer_name',
                label: $st('wp-suo-shu-ke-hu')
            }, {
                id: 'maintainer',
                label: $st('wp-wei-bao-fu-ze-ren'),
                formatter: (detail) => {
                    const value = detail.maintainer || '';
                    const alias = props.friendsObj && props.friendsObj[value];
                    const allalias = value + (alias ? ` (${alias})` : '');
                    return allalias || value;
                }
            }, {
                id: 'uuid',
                label: $st('wp-she-bei-hao')
            }, {
                id: 'model',
                label: $st('wp-xing-hao')
            }, {
                id: 'devicemanager',
                label: $st('wp-ke-hu-fu-ze-ren')
            }, {
                id: 'devicemanagerphone',
                label: $st('wp-ke-hu-fu-ze-ren-lian-xi-fang-shi')
            }, {
                id: 'address',
                label: $st('wp-di-qu'),
                formatter: (detail) => {
                    return detail.address && detail.address.country ? detail.address.country + detail.address.province + detail.address.city : '';
                }
            }, {
                id: 'label',
                label: $st('wp-biao-qian'),
                type: 'label-list'
            }, {
                id: 'remark',
                label: $st('wp-bei-zhu')
            }],
            listData: {},
            nopaListprops: [{
                id: 'uuid',
                label: $st('wp-she-bei-hao')
            }],
            nopaListData: {
                uuid: props.uuid
            }
        });

        // 获取设备档案
        const getDeviceFile = () => {
            getDeviceFileInfo({
                product_id: props.productId
            }).then((data) => {
                state.listData = data.value;
            });
        };

        onActivated(() => {
            if (!props.productId) return;
            getDeviceFile();
        });

        return {
            ...toRefs(state),
            getDeviceFileInfo
        };
    }
};
</script>
<style lang="scss" scoped>
.line-box {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
    .line-left {
        width: 80px;
        margin-right: 10px;
        color: rgba(0, 0, 0, 0.6);
    }
    .line-right {
        flex: 1;
    }
}
.nopa {
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
}
</style>
